/**圆百分比**/
var pie = {
    init:function(){
       var p=0;
       var len=$(".jqm-round-wrap").length;
       for(p=0;p<len;p++){
       var k=$("#jqm-round-sector"+p).next(".jqm-round-circle").find("p").html();
           k=percentTofloat(k);
       this.run({
           id:"jqm-round-sector"+p,
           percent: k,
           color: '#67c23a',
        //    color:p==0?'#409eff':'#ff5353',
           onBefore:function(ctx){
               ctx.fillStyle = '#e8e8e8';
               ctx.beginPath();
               ctx.moveTo(100, 100);   
               ctx.arc(100, 100, 100, 0, Math.PI * 2);
               ctx.fill();
           }
         });
       }
       function percentTofloat(km){
           if(km.substring(km.length-1,km.length)=="%"){
               km = km.substring(0,km.length-1);
               km = km/100;
           }
           return km;
       } 
    },
    run:function(opts){
        if(!opts.id) throw new Error("must be canvas id.");
        var canvas = document.getElementById(opts.id), ctx;
        if(canvas && (ctx = canvas.getContext("2d"))){
            canvas.width = canvas.height = "200";
            var noop = function(){};
            var before = opts.onBefore || noop;
            var after = opts.onAfter || noop;
            before(ctx);
            ctx.fillStyle = opts.color || '#f76220';
            var step = opts.step || 1;
            var delay = opts.delay || 10;
            var i = 0, rage = 360 * (opts.percent || 0);
            var sRage = -Math.PI * 0.5;
            var djs = function(){
                i = i + step;
                if(i <= rage){
                   ctx.beginPath();
                   ctx.moveTo(100, 100);   
                   ctx.arc(100, 100, 100, sRage, Math.PI * 2 * (i/360)+sRage);
                   ctx.fill();
                   setTimeout(djs, delay);
                } else {
                   after(ctx);
                }
            };
            djs();
       }
    }
};
/**首页报表**/
var chartReport = {
    allindex:function(){
        /*if($('#market').length){
            var _url = '../resource/jsondata/report_data.json';
            chartReport.allajax(_url,function(d){
                chartReport.market(d.data)
            }); 
        }
        if($('#department').length){
            var _url = '../resource/jsondata/report_data2.json';
            chartReport.allajax(_url,function(d){
                chartReport.department(d.data)
            });
        }*/
    },
    allajax:function(url,_data,callback){
        $.ajax({
            url: url,
            data: _data,
            type: 'get',
            dataType: 'json',
            success:callback
        });
    },
    market:function(t){
        var myChart = echarts.init(document.getElementById('market'));
        var _legend=[];
        var _datas=[];
        var _yAxisName=[];
        var maxVal = 1;
        for(var i in t){
        	_datas[i]=[];
        	for(var j in t[i]){
        		if(j=='name'){
        			_legend.push(t[i][j]);
        		}else{
        			for(var k in t[i][j]){
                        maxVal = maxVal<parseInt(t[i][j][k].value)?parseInt(t[i][j][k].value): maxVal;
        				if(i==0){
        					if(t[i][j][k].value!=0){
        						_datas[i].push(t[i][j][k].value*-1);
        					}else{
                                _datas[i].push(t[i][j][k].value);
                            }
        					_yAxisName.push(t[i][j][k].name);
        				}else{
        					_datas[i].push(t[i][j][k].value);
        				}
        				
        			}
        		}
        	}
        }
        // console.log(_datas,maxVal);
        var option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                   type : 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter:function(params){ // 改鼠标悬浮提示值格式
                  var relVal = params[0].name+"<br/>";
                  relVal += params[0].seriesName+ ' : ' + (params[0].value) +"<br/>";
                  if(params.length==2){
                      relVal += params[1].seriesName+ ' : ' +(-params[1].value)+"<br/>";
                  }
                  return relVal;
                }
            },
            legend: {
                data:[ '线下', '线上']
            },
            grid: {
              left: '0',
              right: '0',
              bottom: '3%'
            },
            xAxis : [
                {
                    type : 'value',
                    splitNumber:10,
                    show:false,
                    min:-maxVal*1.2,
                    max:maxVal*1.2,
                    axisLabel:{
                      formatter:function(value){
                        if(value<0){
                          return -value;
                        }
                        return value;
                      }
                    }
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    axisTick : {show: false},
                    data : _yAxisName,
                    axisLabel: {show: false},
                    axisLine:{
                      show:false,
                      lineStyle:{
                            color:'#eaeaea',
                        }
                      }
                }
            ],
            legend:{
                show:false
            },
            textStyle:{
                color:'#626262'
            },
            series : [
                {
                    name:'线上',
                    type:'bar',
                    stack: '总量',
                    itemStyle:{
                      normal:{
                          color:'#fbcece' 
                      },
                      emphasis:{
                          color:'#fbcece'
                      }    
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter:[
                                '{title|{b}}',
                                '{value|{c}}',
                            ].join('\n'),
                            rich: {
                                title: {
                                    color: '#333333',
                                    lineHeight: 18,
                                    align: 'left',
                                },
                                value: {
                                    color: '#ff5353',
                                    lineHeight: 18,
                                    align: 'left',
                                }
                            }
                        }
                    },
                    barWidth:32,
                    // barMinHeight:50,
                    data:_datas[1]
                },
                {
                    name:'线下',
                    type:'bar',
                    stack: '总量',
                    itemStyle:{
                        normal:{
                            color:'#c4daf1' 
                        },
                        emphasis:{
                            color:'#c4daf1'
                        }   
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'left',
                            formatter: function(params) {
                                return '{title|' + params.name + '}\n{value|' + (-params.value) + '}';
                            },
                            rich: {
                                title: {
                                    color: '#333333',
                                    lineHeight: 18,
                                    align: 'right',
                                },
                                value: {
                                    color: '#409eff',
                                    lineHeight: 18,
                                    align: 'right',
                                }
                            }
                        }
                    },
                    barWidth:32,
                    // barMinHeight:50,
                    data:_datas[0]
                }
            ]
        };
        myChart.setOption(option);
        window.onresize = function () {
            myChart.resize();
        }
    },
    department:function(t){
        var myChart = echarts.init(document.getElementById('department'));
        var _legend=[];
        var _datas=[];  
        var _series=[];
        var _yAxisName=[];
        for(var i in t){
        	_datas[i]=[];
        	for(var j in t[i]){
        		if(j=='name'){
        			_legend.push(t[i][j]);
        		}else{
        			for(var k in t[i][j]){
        				_datas[i].push(t[i][j][k].value);
    					if(i==0){
            				_yAxisName.push(t[i][j][k].name);
            			}
        			}
        		}
        	}
        }
        for(var i =0 ;i<_legend.length;i++){
        	_series.push({
                name:_legend[i],
                type:'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data:_datas[i]
            })
        }
        var option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:_legend
            },
            grid: {
                left: '0',
                right: '3%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#428bca'
                        }
                    },
                    axisLabel:{
                        textStyle:{
                            color:'#333333'
                        }
                    },
                    splitNumber:20
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    axisTick : {show: false},
                    data : _yAxisName,
                    splitLine: {
                        show: true
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#428bca'
                        }
                    },
                    axisLabel:{
                        textStyle:{
                            color:'#374148'
                        }
                    },

                }
            ],
            color:['#ff5722','#ffb800','#009688','#1e9fff'],
            series : _series
        };
        myChart.setOption(option);
        window.onresize = function () {
            myChart.resize();
        }
    }
}
$(function(){
    pie.init();   
})
